<!--模板开始-->
<style type="text/css">

    .showwords
    {
        font-size: 27px;
        position: absolute;
        z-index: 1;
        top: 83%;
        margin: -39px;
        width: 100%;
        height: 37px;
        line-height: 37px;
        letter-spacing: 4px;
        color: black;
        font-weight: bold;
        text-shadow: 3px 3px 10px white, 3px -3px 10px white, -3px -3px 10px white, -3px 3px 10px white;
        left: 40px;
        text-align: center;

    }

    *
    {
        padding: 0px;
        margin: 0px;
        -webkit-box-sizing: border-box;
    }

    body
    {
        background-color: black;
    }

    #container
    {
        width: 500px;
        height: 100%;
        position: absolute;
        overflow: hidden;
        /*background-image: url(http://hg.jielanhua.cn/ps/love1/love1_back.jpg); */
    }

    #piCU4B10R-an-obj-1 {
        position:absolute;
        -webkit-transform: translate3d(0px, 0px, 0px);
        width: 500px;
        height: 815px;
        top:0; left:0;
    }

    #piCU4B10R-an-obj-2 {
        position:absolute;
        -webkit-transform: translate3d(18px, 246px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(37.6deg) scale3d(1.4, 1.25, 1);
        width: 464px;
        height: 98px;
        top:0; left:0;
        -webkit-animation: ani-piCU4B10R-an-obj-2-0 3.1218s 0s infinite linear alternate both ;
    }

    @-webkit-keyframes ani-piCU4B10R-an-obj-2-0 {
        0% {
            -webkit-transform: translate3d(27px, 246px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(37.6deg) scale3d(1.4, 1.25, 1);
            -webkit-animation-timing-function:linear;
        }
        100% {
            -webkit-transform: translate3d(18px, 246px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(37.6deg) scale3d(1.4, 1.25, 1);
            -webkit-animation-timing-function:linear;
        }
    }

    #piCU4B10R-an-obj-3 {
        position:absolute;
        -webkit-transform: translate3d(20px, 529px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-23.2deg) scale3d(1.36, 1.36, 1);
        width: 464px;
        height: 98px;
        top:0; left:0;
        -webkit-animation: ani-piCU4B10R-an-obj-3-0 3.1176s 0.0042s infinite linear alternate both ;
    }

    @-webkit-keyframes ani-piCU4B10R-an-obj-3-0 {
        0% {
            -webkit-transform: translate3d(20px, 529px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-23.2deg) scale3d(1.36, 1.36, 1);
        }
        100% {
            -webkit-transform: translate3d(38px, 529px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-23.2deg) scale3d(1.36, 1.36, 1);
        }
    }

    #piCU4B10R-an-obj-4 {
        position:absolute;
        -webkit-transform: translate3d(33px, -39px, 0px) scale3d(1.76, 1.72, 1);
        width: 500px;
        height: 461px;
        top:0; left:0;
        -webkit-transform-origin: 50% 0.73%;
        -webkit-animation: ani-piCU4B10R-an-obj-4-0 3.7563s 0.0084s infinite linear alternate both ;
    }

    @-webkit-keyframes ani-piCU4B10R-an-obj-4-0 {
        0% {
            -webkit-transform: translate3d(33px, -39px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-8deg) scale3d(1.76, 1.72, 1);
            -webkit-animation-timing-function:linear;
            opacity: 1;
        }
        39.388% {
            -webkit-transform: translate3d(33px, -39px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(2.76deg) scale3d(1.76, 1.72, 1);
            -webkit-animation-timing-function:linear;
            opacity: 0.4;
        }
        100% {
            -webkit-transform: translate3d(33px, -39px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(8.1deg) scale3d(1.76, 1.72, 1);
            -webkit-animation-timing-function:linear;
            opacity: 1;
        }
    }

    #piCU4B10R-an-obj-10 {
        position:absolute;
        -webkit-transform: translate3d(-52px, 627px, 20px) scale3d(0.91, 1.01, 1);
        width: 659px;
        height: 190px;
        top:0; left:0;
        -webkit-animation: ani-piCU4B10R-an-obj-10-0 2.7211s 0s infinite linear alternate both ;
    }

    @-webkit-keyframes ani-piCU4B10R-an-obj-10-0 {
        0% {
            -webkit-transform: translate3d(-58px, 622px, 20px) scale3d(0.91, 1.01, 1);
        }
        100% {
            -webkit-transform: translate3d(-52px, 622px, 20px) scale3d(0.91, 1.01, 1);
        }
    }

    #piCU4B10R-an-obj-11 {
        position:absolute;
        -webkit-transform: translate3d(141px, 162px, 0px);
        width: 40px;
        height: 8px;
        top:0; left:0;
    }

    .piCU4B10R-an-obj-12 {
        position:absolute;
        -webkit-transform: translate3d(12px, -51px, 0px);
        width: 16px;
        height: 29px;
        top:-2px; left:-4px;
        -webkit-animation: ani-piCU4B10R-an-obj-12-0 10s 0s infinite linear both ;
    }

    @-webkit-keyframes ani-piCU4B10R-an-obj-12-0 {
        0% {
            -webkit-transform: translate3d(12px, -51px, 0px);
        }
        100% {
            -webkit-transform: translate3d(510px, 521px, 0px);
        }
    }

    .piCU4B10R-an-obj-13 {
        position:absolute;
        -webkit-transform: translate3d(15px, -64px, 0px) scale3d(1, 0.34, 1);
        width: 20px;
        height: 20px;
        top:0; left:0;
        -webkit-animation: ani-piCU4B10R-an-obj-13-0 9.9971s 0.0029s infinite linear both ;
    }

    @-webkit-keyframes ani-piCU4B10R-an-obj-13-0 {
        0% {
            -webkit-transform: translate3d(15px, -64px, 0px) scale3d(1, 0.34, 1);
        }
        100% {
            -webkit-transform: translate3d(513px, 508px, 0px) scale3d(1, 0.34, 1);
        }
    }

    .piCU4B10R-an-obj-14 {
        position:absolute;
        -webkit-transform: translate3d(-15px, 15px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(1deg);
        width: 40px;
        height: 8px;
        top:0; left:0px;
        -webkit-animation: ani-piCU4B10R-an-obj-14-0 0.3179s 0s infinite linear both ;
    }

    @-webkit-keyframes ani-piCU4B10R-an-obj-14-0 {
        0% {
            -webkit-transform: translate3d(-15px, 15px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(1deg);
            -webkit-animation-timing-function:linear;
        }
        100% {
            -webkit-transform: translate3d(-15px, 15px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(180.2deg);
            -webkit-animation-timing-function:linear;
        }
    }

    #piCU4B10R-an-obj-15 {
        position:absolute;
        -webkit-transform: translate3d(12px, -51px, 0px);
        width: 16px;
        height: 29px;
        top:0; left:-4px;
        -webkit-animation: ani-piCU4B10R-an-obj-15-0 5s 0s infinite linear alternate both ;
    }

    @-webkit-keyframes ani-piCU4B10R-an-obj-15-0 {
        0% {
            -webkit-transform: translate3d(118px, 300px, 0px);
            -webkit-animation-timing-function:linear;
        }
        100% {
            -webkit-transform: translate3d(11px, 313px, 0px);
            -webkit-animation-timing-function:linear;
        }
    }

    #piCU4B10R-an-obj-16 {
        position:absolute;
        -webkit-transform: translate3d(15px, -62px, 0px) scale3d(1, 0.52, 1);
        width: 20px;
        height: 20px;
        top:0; left:0;
        -webkit-animation: ani-piCU4B10R-an-obj-16-0 5s 0s infinite linear alternate both ;
    }

    @-webkit-keyframes ani-piCU4B10R-an-obj-16-0 {
        0% {
            -webkit-transform: translate3d(123px, 291px, 0px) scale3d(1, 0.52, 1);
            -webkit-animation-timing-function:linear;
        }
        100% {
            -webkit-transform: translate3d(13px, 306px, 0px) scale3d(1, 0.52, 1);
            -webkit-animation-timing-function:linear;
        }
    }

    #piCU4B10R-an-obj-17 {
        position:absolute;
        -webkit-transform: translate3d(-15px, 8px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(1deg);
        width: 40px;
        height: 8px;
        top:0; left:0;
        -webkit-animation: ani-piCU4B10R-an-obj-17-0 0.3179s 0s infinite linear both ;
    }

    @-webkit-keyframes ani-piCU4B10R-an-obj-17-0 {
        0% {
            -webkit-transform: translate3d(-15px, 8px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(1deg);
            -webkit-animation-timing-function:linear;
        }
        100% {
            -webkit-transform: translate3d(-15px, 8px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(180.2deg);
            -webkit-animation-timing-function:linear;
        }
    }

    #piCU4B10R-an-obj-18 {
        position:absolute;
        -webkit-transform: translate3d(-30px, 725px, 0px);
        width: 92px;
        height: 121px;
        top:0; left:0;
        -webkit-animation: ani-piCU4B10R-an-obj-18-0 1.9814s 0.1619s infinite linear alternate both ;
    }

    @-webkit-keyframes ani-piCU4B10R-an-obj-18-0 {
        0% {
            -webkit-transform: translate3d(-30px, 725px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            -webkit-transform-origin: 58.7% 82.23%;
            -webkit-animation-timing-function:linear;
        }
        100% {
            -webkit-transform: translate3d(-30px, 725px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-4deg);
            -webkit-transform-origin: 58.7% 82.23%;
            -webkit-animation-timing-function:linear;
        }
    }

    #piCU4B10R-an-obj-19 {
        position:absolute;
        -webkit-transform: translate3d(53px, 776px, 0px);
        width: 55px;
        height: 65px;
        top:0; left:0;
        -webkit-animation: ani-piCU4B10R-an-obj-19-0 1.9814s 0.1253s infinite linear alternate both ;
    }

    @-webkit-keyframes ani-piCU4B10R-an-obj-19-0 {
        0% {
            -webkit-transform: translate3d(53px, 776px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);
            -webkit-transform-origin: 37.27% 86.92%;
            -webkit-animation-timing-function:linear;
        }
        100% {
            -webkit-transform: translate3d(53px, 776px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-6.3deg) scale3d(1.11, 1, 1);
            -webkit-transform-origin: 37.27% 86.92%;
            -webkit-animation-timing-function:linear;
        }
    }

    #piCU4B10R-an-obj-20 {
        position:absolute;
        -webkit-transform: translate3d(137px, 720px, 0px);
        width: 76px;
        height: 137px;
        top:0; left:0;
        -webkit-animation: ani-piCU4B10R-an-obj-20-0 1.9814s 0.0053s infinite linear alternate both ;
    }

    @-webkit-keyframes ani-piCU4B10R-an-obj-20-0 {
        0% {
            -webkit-transform: translate3d(137px, 720px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            -webkit-transform-origin: 60.53% 74.82%;
            -webkit-animation-timing-function:linear;
        }
        100% {
            -webkit-transform: translate3d(137px, 720px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-2.7deg);
            -webkit-transform-origin: 60.53% 74.82%;
            -webkit-animation-timing-function:linear;
        }
    }

    #piCU4B10R-an-obj-21 {
        position:absolute;
        -webkit-transform: translate3d(214px, 758px, 0px);
        width: 67px;
        height: 62px;
        top:0; left:0;
        -webkit-animation: ani-piCU4B10R-an-obj-21-0 1.9814s 0.3253s infinite linear alternate both ;
    }

    @-webkit-keyframes ani-piCU4B10R-an-obj-21-0 {
        0% {
            -webkit-transform: translate3d(214px, 758px, 0px) scale3d(1, 1, 1);
            -webkit-animation-timing-function:linear;
        }
        100% {
            -webkit-transform: translate3d(214px, 758px, 0px) scale3d(1.15, 1, 1);
            -webkit-animation-timing-function:linear;
        }
    }

    #piCU4B10R-an-obj-22 {
        position:absolute;
        -webkit-transform: translate3d(247px, 731px, 0px);
        width: 67px;
        height: 81px;
        top:0; left:0;
        -webkit-animation: ani-piCU4B10R-an-obj-22-0 1.9814s 0.2653s infinite linear alternate both ;
    }

    @-webkit-keyframes ani-piCU4B10R-an-obj-22-0 {
        0% {
            -webkit-transform: translate3d(247px, 731px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            -webkit-transform-origin: 61.94% 91.98%;
            -webkit-animation-timing-function:linear;
        }
        100% {
            -webkit-transform: translate3d(247px, 731px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-6.1deg);
            -webkit-transform-origin: 61.94% 91.98%;
            -webkit-animation-timing-function:linear;
        }
    }

    #piCU4B10R-an-obj-23 {
        position:absolute;
        -webkit-transform: translate3d(343px, 667px, 0px);
        width: 67px;
        height: 175px;
        top:0; left:0;
        -webkit-animation: ani-piCU4B10R-an-obj-23-0 1.9814s 0.0453s infinite linear alternate both ;
    }

    @-webkit-keyframes ani-piCU4B10R-an-obj-23-0 {
        0% {
            -webkit-transform: translate3d(343px, 667px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            -webkit-transform-origin: 29.1% 86.57%;
            -webkit-animation-timing-function:ease-in-out;
        }
        100% {
            -webkit-transform: translate3d(343px, 667px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-7.5deg);
            -webkit-transform-origin: 29.1% 86.57%;
            -webkit-animation-timing-function:ease-in-out;
        }
    }

    #piCU4B10R-an-obj-24 {
        position:absolute;
        -webkit-transform: translate3d(317px, 716px, 0px);
        width: 170px;
        height: 211px;
        top:0; left:0;
        -webkit-animation: ani-piCU4B10R-an-obj-24-0 1.9814s 0.3719s infinite linear alternate both ;
    }

    @-webkit-keyframes ani-piCU4B10R-an-obj-24-0 {
        0% {
            -webkit-transform: translate3d(317px, 716px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            -webkit-transform-origin: 54.12% 58.06%;
            -webkit-animation-timing-function:ease-in-out;
        }
        100% {
            -webkit-transform: translate3d(317px, 716px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-6.6deg);
            -webkit-transform-origin: 54.12% 58.06%;
            -webkit-animation-timing-function:ease-in-out;
        }
    }
    #container > div
    {
        position: absolute;
    }
    #page1
    {
        left: 0px;
        top: 0px;
    }
    @-webkit-keyframes guamove
    {
        from  {-webkit-transform: rotate(-5deg);}
        to    {-webkit-transform: rotate(5deg);}
    }
    @-webkit-keyframes kuangmove
    {
        from  {-webkit-transform: translate(8px,0px);}
        to    {-webkit-transform: translate(-8px,0px);}
    }
    @-webkit-keyframes content_ani
    {
        0%  {-webkit-transform: translate(0px,0px);}
        15% {-webkit-transform: translate(0px,720px);}
        19% {-webkit-transform: translate(0px,680px);}
        24% {-webkit-transform: translate(0px,700px);}
        85% {-webkit-transform: translate(0px,700px);}
        90% {-webkit-transform: translate(0px,750px);}
        100%{-webkit-transform: translate(0px,-200px);}
    }
    @-webkit-keyframes wordfade
    {
        from {-webkit-transform: translate(5px,-5px);opacity: 0}
        to   {-webkit-transform: translate(0px,0px);opacity: 1}
    }
    @-webkit-keyframes zhuqingting1
    {
        from  {-webkit-transform: translate(0px,0px);}
        to    {-webkit-transform: translate(400px,-200px);}
    }
    @-webkit-keyframes zhuqingting2
    {
        from  {-webkit-transform: translate(0px,0px);}
        to    {-webkit-transform: translate(550px,-400px);}
    }
    @-webkit-keyframes fadeout
    {
        from  {opacity: 1}
        to    {opacity: 0}
    }
    #pagetitle
    {
        position: absolute;
        width: 500px;
        top: 0px;
        left: 0px;
        height: 500px;
    }
</style>

<div id='container'>
    <div id="piCU4B10R-an-obj-1"><div><img height="815" width="500" src="{$skinurl}skin/green/bg0.jpg"></div></div>
    <div id="piCU4B10R-an-obj-2"><div><img height="98" width="464" src="{$skinurl}skin/green/houtiao.png"></div></div>
    <div id="piCU4B10R-an-obj-3"><div><img height="98" width="464" src="{$skinurl}skin/green/houtiao.png"></div></div>
    <div id="piCU4B10R-an-obj-4"><div><img height="461" width="500" src="{$skinurl}skin/green/light.png"></div></div>
    <img style='position:absolute;top:625px;' height="190" width="659" src="{$skinurl}skin/green/grsds.png">
    <div id="piCU4B10R-an-obj-18"><div><img height="121" width="92" src="{$skinurl}skin/green/fla1.png"></div></div>
    <div id="piCU4B10R-an-obj-19"><div><img height="65" width="55" src="{$skinurl}skin/green/fla2.png"></div></div>
    <div id="piCU4B10R-an-obj-20"><div><img height="137" width="76" src="{$skinurl}skin/green/fla3.png"></div></div>
    <div id="piCU4B10R-an-obj-21"><div><img height="62" width="67" src="{$skinurl}skin/green/fla4.png"></div></div>
    <div id="piCU4B10R-an-obj-22"><div><img height="81" width="67" src="{$skinurl}skin/green/fla5.png"></div></div>
    <div id="piCU4B10R-an-obj-23"><div><img height="175" width="67" src="{$skinurl}skin/green/fla7.png"></div></div>
    <div id="piCU4B10R-an-obj-24"><div><img height="211" width="170" src="{$skinurl}skin/green/fla6.png"></div></div>

    <div id='pageh' style='top: -750px;'>
        <img src='{$skinurl}skin/green/zhang.png' style='position:absolute;left:0px;top:78px;'>
        <img src='{$skinurl}skin/green/gua.png' style='position:absolute;left:112px;top:103px;-webkit-transform-origin: 40.85% 11.54%;-webkit-animation: guamove 2s ease-in-out infinite alternate'>
        <img src='{$skinurl}skin/green/gua.png' style='position:absolute;-webkit-transform-origin: 46.95% 8.79%;left:362px;top:109px;-webkit-animation: guamove 2s ease-in-out infinite alternate'>
        <div style='position:absolute;left:10px;top:154px;width:480px;-webkit-animation: kuangmove 2s ease-in-out infinite alternate'>
            <div style='position:absolute;top:56px;left:57px;width:376px;height:266px;overflow:hidden;'>
                <img id='imgh' style='position:absolute'>
                <span id='wordh' class='showwords'></span>
            </div>
            <img src='{$skinurl}skin/green/ktt.png' style='width:480px;height:374px;position:absolute;-webkit-transform-origin: 54.12% 6.39%;'>
        </div>
    </div>
    <div id='pagev' style='top:-750px;'>
        <img src='{$skinurl}skin/green/zhang.png' style='position:absolute;left:0px;top:78px;'>
        <img src='{$skinurl}skin/green/gua.png' style='position:absolute;left:112px;top:103px;-webkit-transform-origin: 40.85% 11.54%;-webkit-animation: guamove 2s ease-in-out infinite alternate'>
        <img src='{$skinurl}skin/green/gua.png' style='position:absolute;-webkit-transform-origin: 46.95% 8.79%;left:362px;top:109px;-webkit-animation: guamove 2s ease-in-out infinite alternate'>
        <div style='position:absolute;left:35px;top:154px;width:420px;-webkit-animation: kuangmove 2s ease-in-out infinite alternate'>
            <div style='position:absolute;top:44px;left:53px;width:323px;height:464px;overflow:hidden;background-color:#000;'>
                <img id='imgv' style='position:absolute'>
                <span id='wordv' class='showwords'></span>
            </div>
            <img src='{$skinurl}skin/green/kt.png' style='width:420px;position:absolute;-webkit-transform-origin: 54.12% 6.39%;-webkit-transform: scale(1,1)'>
        </div>
    </div>

    <div id="piCU4B10R-an-obj-16">
        <div id="piCU4B10R-an-obj-17"><div><img height="8" width="40" src="{$skinurl}skin/green/xz.png"></div></div>
    </div>
    <div class="piCU4B10R-an-obj-13">
        <div class="piCU4B10R-an-obj-14"><div><img height="8" width="40" src="{$skinurl}skin/green/xz.png"></div></div>
    </div>
    <div class="piCU4B10R-an-obj-12"><div><img height="29" width="16" src="{$skinurl}skin/green/ghostun.png"></div></div>

    <div style='position:absolute;top:200px;left:-30px;-webkit-animation:zhuqingting1 8s 2s linear infinite'>
        <div style='position:absolute;top:0px;left:0px;-webkit-transform: scale(1,.5)'>
            <div class="piCU4B10R-an-obj-14"><div><img height="8" width="40" src="{$skinurl}skin/green/xz.png"></div></div>
        </div>
        <img height="29" width="16" style='position:absolute;top:8px;left:-8px;' src="{$skinurl}skin/green/ghostun.png">
    </div>
    <div style='position:absolute;top:600px;left:-30px;-webkit-animation:zhuqingting2 10s 5s linear infinite'>
        <div style='position:absolute;top:0px;left:0px;-webkit-transform: scale(1,.5)'>
            <div class="piCU4B10R-an-obj-14"><div><img height="8" width="40" src="{$skinurl}skin/green/xz.png"></div></div>
        </div>
        <img height="29" width="16" style='position:absolute;top:8px;left:-8px;' src="{$skinurl}skin/green/ghostun.png">
    </div>

    <div id="piCU4B10R-an-obj-15"><div><img height="29" width="16" src="{$skinurl}skin/green/ghostun.png"></div></div>

    <div id='pagetitle' style='pointer:none'>
        <!-- <img src='{$skinurl}skin/green/zhang.png' style='position:absolute;left:0px;top:78px;'> -->
        <div style='width:400px;left:50px;height:180px;font-size:40px;color:#0A2700;position:absolute;top:250px;overflow:hidden;text-align:center'>
            <div style='width:400px;height:180px;position:absolute;display:table'>
                <div id='titlecontent' style='width:400px;height:150px;display:table-cell;vertical-align:middle;line-height:150%;'>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var image_size_width=[];
    var image_size_height=[];

    var image_url_index=0;
    var have_num = 0;
    var error_num = 0;
    var canshow = true;
    var reshow = false;
    var timeout1;
    var timeout2;
    var timeout3;
    var timeout4;
    var timeout5;
    var delaytime;
    function id(name)
    {
        return document.getElementById(name);
    }

    function load_images()
    {
        reshow = false;
        image_size_width=[];
        image_size_height=[];
        Onload_imgs_url=[];

        image_url_index=0;
        have_num = 0;
        error_num = 0;
        begin_titletime = new Date();
        begin_titletime = begin_titletime.getTime();
        showtitle();
        id('pageh').style.display = 'block';
        id('pagev').style.display = 'block';
        id('pageh').style.webkitAnimation = '';
        id('pagev').style.webkitAnimation = '';
        // id('pageh').style.display = 'none';
        // id('pagev').style.display = 'none';
        clearTimeout(timeout1);
        clearTimeout(timeout2);
        clearTimeout(timeout3);
        clearTimeout(timeout4);
        clearTimeout(timeout5);
        canshow = true;

        bl_keepload = 'first';
        step_load();
    }

    //每次执行加载后5张图片
    var bl_keepload = 'first';
    var step_loadnum = 5;
    function step_load()
    {
        var load_num = 0
        //初步加载X张
        if(image_url_index  == 0 && bl_keepload == 'first')
        {
            console.log('loading continue');
            if(slider_images_url.length > step_loadnum)
            {
                load_num = step_loadnum;
                bl_keepload = 'next';
            }
            else
            {
                load_num = slider_images_url.length;
                bl_keepload = 'end';
            }
            for(var i = 0; i< load_num; i++)
            {
                var img=new Image();
                img.index=i;
                img.src=slider_images_url[i];
                img.onload=image_onload;
                img.onerror= image_onerror;
                Onload_imgs_url[i] = 'loading';
            }
        }
        else if(bl_keepload == 'end')
        {
            return;
        }
        else
        {
            console.log('loading continue');
            if(slider_images_url.length - image_url_index >step_loadnum*2)
            {
                load_num = step_loadnum;
            }
            else
            {
                load_num = slider_images_url.length - image_url_index - step_loadnum;
                bl_keepload = 'end';
            }
            for(var i = image_url_index +step_loadnum; i< image_url_index + step_loadnum + load_num; i++)
            {
                var img=new Image();
                img.index=i;
                img.src=slider_images_url[i];
                img.onload=image_onload;
                img.onerror= image_onerror;
                Onload_imgs_url[i] = 'loading';
            }
        }

    }
    function image_onerror(event)
    {
        var img = event.target;
        var index = img.index;
        if(index<step_loadnum)
            error_num ++;
        Onload_imgs_url[index] = 'not find';
        // console.log(Onload_imgs_url[index]);
        // console.log(have_num + '-' + error_num);
        if((have_num+error_num >= step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
        {
            reshow = false;
            canshow =false;
            if(have_num == 0)
                return;

            var end_titletime = new Date();
            end_titletime = end_titletime.getTime();
            var dis_titletime = Math.abs(end_titletime-begin_titletime);
            if(e_title.length<30)
            {
                delaytime = (e_title.length*0.2 +1)*1000;
            }
            else
            {
                delaytime = (30*0.2 +1)*1000;
            }

            if(dis_titletime>delaytime)
            {
                distitle();
                timeout1 = setTimeout(begin_show,1000);
            }
            else
            {
                dis_titletime = delaytime- dis_titletime;
                timeout1 = setTimeout(function()
                {
                    distitle();
                    timeout2 = setTimeout(begin_show,1000);
                },dis_titletime);
            }
        }
    }
    function image_onload(event)
    {
        if(reshow == true)
            return;

        var img=event.target;
        var index = img.index;
        if(index < step_loadnum)
        {

            have_num++;
        }
        Onload_imgs_url[index] = img.src;
        image_size_height[index] = img.height;
        image_size_width[index] = img.width;

        if((have_num+error_num >= step_loadnum || slider_images_url.length == (have_num + error_num)) && canshow == true)
        {

            reshow = false;
            canshow =false;
            if(have_num == 0)
                return;
            var end_titletime = new Date();
            end_titletime = end_titletime.getTime();
            var dis_titletime = Math.abs(end_titletime-begin_titletime);
            if(e_title.length<30)
            {
                delaytime = (e_title.length*0.2 +1)*1000;
            }
            else
            {
                delaytime = (30*0.2 +1)*1000;
            }

            if(dis_titletime>delaytime)
            {
                distitle();
                timeout1 = setTimeout(begin_show,1000);
            }
            else
            {
                dis_titletime = delaytime- dis_titletime;
                timeout1 = setTimeout(function()
                {
                    distitle();
                    timeout2 = setTimeout(begin_show,1000);
                },dis_titletime);
            }

        }
    }

    function begin_show()
    {
        if(reshow == true)
            return;

        if(image_url_index == Onload_imgs_url.length)
            image_url_index = 0;
        cut_image();
        image_url_index++;
        timeout3 = setTimeout(function()
        {
            id('pageh').style.webkitAnimation = '';
            id('pagev').style.webkitAnimation = '';
            timeout4 = setTimeout(begin_show,100);
        },4900);
    }

    function insertEnter(str,n){
        var len = str.length;
        var strTemp = '';
        if(len > n){
            strTemp = str.substring(0,n);
            str = str.substring(n,len);
            return strTemp+'\n'+str;
        }else{
            return str;
        }
    }

    function cut_image()
    {
        if(reshow == true)
            return;

        while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
        {
            if(image_url_index % step_loadnum == 0)
            {
                step_load();
            }
            // console.log(Onload_imgs_url[image_url_index]);
            image_url_index++;
            if(image_url_index == Onload_imgs_url.length)
                image_url_index = 0;
        }
        if(image_url_index % step_loadnum == 0)
        {
            step_load();
        }
        var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];

        if(img_bili>1)//横版h
        {
            id('pageh').style.webkitAnimation = 'content_ani 5s linear both';
            img_obj = id('imgh');

            img_obj.src = Onload_imgs_url[image_url_index];

            var word = id('wordh');
            var word_string = words[get_pid(Onload_imgs_url[image_url_index])];
            if(word_string != undefined)
            {
                word_string = word_string.replace(/[\n]/ig,'');
                // console.log(word_string);
                var word_length = word_string.length;
                if(word_length >= 10)
                {
                    word.style.fontSize = "24px";
                    word_string = insertEnter(word_string, 5);
                }
                word.innerText = word_string;
                word.style.letterSpacing = "4px";

            }
            else
            {
                word.innerText = "";
            }

            if(img_bili>(376/266))
            {
                img_obj.style.height = '266px';
                img_obj.style.width = img_bili*266 + 'px';
                img_obj.style.top = '0px';
                img_obj.style.left = -((img_bili*266-376)/2) + 'px';
            }
            else
            {
                img_obj.style.width = '376px';
                img_obj.style.height = 376/img_bili + 'px';
                img_obj.style.left = '0px';
                img_obj.style.top = -((376/img_bili-266)/2) + 'px';
            }
        }
        else //竖版v
        {
            id('pagev').style.webkitAnimation = 'content_ani 4.8s linear both';
            img_obj = id('imgv');

            var word = id('wordv');
            var word_string = words[get_pid(Onload_imgs_url[image_url_index])];
            if(word_string != undefined)
            {
                word_string = word_string.replace(/[\n]/ig,'');
                // console.log(word_string);
                var word_length = word_string.length;
                if(word_length >= 10)
                {
                    word.style.fontSize = "24px";
                    word_string = insertEnter(word_string, 5);
                }
                word.innerText = word_string;
                word.style.letterSpacing = "5px";
            }
            else
            {
                word.innerText = "";
            }

            img_obj.src = Onload_imgs_url[image_url_index];

            if(img_bili>(323/464))
            {
                img_obj.style.height = '464px';
                img_obj.style.width = img_bili*464 + 'px';
                img_obj.style.top = '0px';
                img_obj.style.left = -((img_bili*464-323)/2) + 'px';
            }
            else
            {
                img_obj.style.width = '323px';
                img_obj.style.height = 323/img_bili + 'px';
                img_obj.style.left = '0px';
                img_obj.style.top = -((323/img_bili-464)/2) + 'px';
            }
        }
        // console.log(img_obj.src);
    }
    call_me(load_images);
    function showtitle()
    {
        if(reshow == true)
            return;
        var content = id('titlecontent');
        var html_text = '<div id="texttitle" style="display:block;width:400px;">';
        for(var i = 0;i<e_title.length;i++)
        {
            html_text = html_text + '<span id="span'+i+'" style="position:relative;-webkit-animation: wordfade 0.7s ease-in-out '+i*0.2+'s both">'+ e_title[i]+'</span>';
            if(i%10 == 9)
                html_text = html_text + '<br>';
        }
        content.innerHTML = html_text + '</div>';
    }
    function distitle()
    {
        if(reshow == true)
            return;
        id('pagetitle').style.webkitAnimation = 'fadeout 1s linear both';
        timeout5 = setTimeout(function()
        {
            id('titlecontent').innerHTML = '';
        },1000)
    }
    function reload_scene()
    {
        reshow = true;
        clearnode();
        load_images();
    }
    function clearnode()
    {
        id('pagev').style.display = 'none';
        id('pageh').style.display = 'none';
        id('pagev').style.webkitAnimation = '';
        id('pageh').style.webkitAnimation = '';
        id('pagetitle').style.webkitAnimation = '';

    }
</script>
<!-- 模板结束 -->